import React from 'react';
import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import ShadowBoxView from '../widgets/ShadowBoxView';
import screen from '../utils/screen';
import {getffly, getString} from '../utils/common';
import Constants from '../utils/Constants';


export default ({item,index,onPress})=>{

     return (
        <View style={{marginTop: 10}}
              key={index.toString()}
        >
            <ShadowBoxView
                shadowOption={{
                    radius:screen.PIXEL_40,
                    color:'#000',
                    x:0,
                    y:0,
                    border:5
                }}
            >
                <TouchableOpacity
                    activeOpacity={1}
                    style={styles.cardItem}
                    onPress={onPress}
                >
                    <View style={styles.itemImgBg}>
                        <Image source={{uri:item.icon}}
                               resizeMode={'contain'}
                               style={styles.itemImage}
                        />
                        <View style={styles.rewardBg}>
                            <Text style={{color:'#fff',fontSize:11}}>{Constants.appsymbol}
                                <Text style={{fontSize:17}}> {item.reward}</Text>
                            </Text>
                        </View>
                    </View>
                    <View style={{flex:1,marginLeft:screen.PIXEL_30,justifyContent:'space-between'}}>
                        <View>
                            <Text style={{color:'#FF7B14',fontSize: 12}}>from {item.from}</Text>
                            <Text style={{color:'#000',fontSize: 19}}>{item.title}</Text>
                            <Text style={{color:'#999',fontSize: 12}}>{item.receive_time}</Text>
                            <Text style={{color:'#999',fontSize: 12}}>Order ID:{item.id}</Text>

                        </View>

                        <Text style={{color:'#000',fontSize: 13}} numberOfLines={1}>{'commission ' + Constants.appsymbol }
                            <Text style={{fontFamily:getffly('bold'),fontSize:18,color:'#FF6F11'}}>  {item.deposit}</Text>
                        </Text>

                    </View>
                </TouchableOpacity>

            </ShadowBoxView>
        </View>
    )
}

const styles = StyleSheet.create({
    cardItem:{
        width:'100%',height: screen.PIXEL_320,backgroundColor:'#fff',
        borderRadius:screen.PIXEL_40,padding:screen.PIXEL_30,
        flexDirection: 'row'
    },
    itemImgBg:{
        backgroundColor:'#E9F5F6',
        width:screen.scaleSize(227),
        height:screen.scaleSize(268),
        justifyContent: 'center',
        alignItems:'center',
        borderRadius: screen.PIXEL_30,
        overflow:'hidden'
    },
    itemImage:{
        width:screen.PIXEL_180,
        height:screen.PIXEL_200,

    },
    rewardBg:{
        position:'absolute',
        bottom:0,
        left:0,
        right:0,
        backgroundColor:'#377C74',
        height:screen.scaleSize(66),
        justifyContent: 'center',
        alignItems: 'center'
    }
})
